<template>
  <div class="page-container">
    <div class="page-card-container" v-global-loading="loading">
      <div
        style="
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;
        "
      >
        <div style="display: flex">
          <a-select
            ref="select"
            v-model:value="pageSet.businessType"
            style="width: 220px"
            allowClear
          >
            <a-select-option
              :value="item.code"
              v-for="(item, index) in option1"
              >{{ item.name }}</a-select-option
            >z
          </a-select>
          <div
            class="commonBtn-warning"
            @click="loadPagination(true)"
            style="margin-left: 10px"
          >
            搜索
          </div>
        </div>
        <!-- v-btn-permission="'approveExamination:create'" -->
        <div class="commonBtn-primary" @click="addFrom">新建</div>
      </div>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1100,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <div class="flex-row-xy-center" v-if="column.title == '操作'">
            <!--  v-btn-permission="'approveExamination:updata'" -->
            <div style="cursor: pointer" @click="modification(record.id)">
              编辑
            </div>
          </div>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <!-- 创建 -->
      <a-modal
        width="500px"
        v-if="showModal"
        v-model:open="showModal"
        :confirmLoading="confirmLoading"
        title="创建模板"
        @ok="showModalCon"
        @cancel="cancel"
        :maskClosable="false"
      >
        <a-form :model="form" ref="formRef" :labelCol="{span: 6}">
          <a-form-item
            label="业务类型"
            name="businessType"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-select v-model:value="form.businessType">
              <a-select-option
                :value="item.code"
                allowClear
                v-for="(item, index) in getDicValue('business_type')"
                :key="index"
                :title="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="选择模板"
            name="flowDesignId"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-select
              v-model:value="form.flowDesignId"
              :filter-option="filterOption"
              show-search
              allowClear
            >
              <a-select-option
                :value="item.id"
                v-for="(item, index) in option2"
                :key="index"
                :title="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, inject, onActivated, onMounted} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {message} from "ant-design-vue";
import {
  flowDesignlistList,
  businessTypeRFlowDesignCreate,
  businessTypeRFlowDesignPage,
  businessTypeRFlowDesignDetail,
  businessTypeRFlowDesignUpdate
} from "@/api/configCenter/platform/examination";

import dayjs from "dayjs";
import {getDicValue} from "@/utils/common";
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const filterOption = (input: string, option: any) => {
  return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const confirmLoading = ref(false);
//表格加载状态
const tableLoading = ref(false);
//表格数据
const tableData = ref([]);
//分页参数
const pageSet: any = ref({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  DesignType: 0
});
const option2 = ref([]);
function moban() {
  flowDesignlistList({DesignType: 0}).then((res) => {
    option2.value = res.data;
  });
}
moban();

//全局加载状态
const loading = ref(false);
//表单ref
const formRef = ref();
//添加参数
const form: any = ref({});
//是否是查看
const isDisabled = ref(false);
//新建弹窗是否显示
const showModal = ref(false);
//选择人员
// function changeRole(name,id){
//   form.value.roleName=name
//   form.value.roleid=id
// }
//获取数据
function loadPagination(reset = false) {
  tableLoading.value = true;
  if (reset) {
    pageSet.value.pageNo = 1;
  }
  businessTypeRFlowDesignPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
      tableLoading.value = false;
    })
    .catch(() => {
      tableLoading.value = false;
    });
}
loadPagination();

//添加
function addFrom() {
  isDisabled.value = false;
  form.value = {};
  showModal.value = true;
}
//新建
function showModalCon() {
  formRef.value.validate().then(() => {
    if (form.value.businessType != "207") {
      form.value.sealFileType = null;
    }
    confirmLoading.value = true;
    if (isDisabled.value) {
      businessTypeRFlowDesignUpdate(form.value)
        .then(() => {
          showModal.value = false;
          loadPagination();
          confirmLoading.value = false;
          message.success("编辑成功");
        })
        .catch(() => {
          confirmLoading.value = false;
        });
    } else {
      businessTypeRFlowDesignCreate(form.value)
        .then(() => {
          showModal.value = false;
          loadPagination();
          confirmLoading.value = false;
          message.success("创建成功");
        })
        .catch(() => {
          confirmLoading.value = false;
        });
    }
  });
}
function cancel() {
  formRef.value.clearValidate();
  showModal.value = false;
}
//编辑
function modification(id) {
  isDisabled.value = true;
  loading.value = true;
  businessTypeRFlowDesignDetail({id: id})
    .then((res) => {
      form.value = res.data;
      form.value.businessType = res.data.businessType + "";
      loading.value = false;
      showModal.value = true;
    })
    .catch(() => {
      loading.value = false;
    });
}

const columns = ref([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    customRender: ({index}) => {
      return index + 1;
    },
    width: 60
  },
  {
    title: "流程模板名称",
    dataIndex: "flowDesignName",
    align: "center",
    width: 250
  },
  {
    title: "业务类型",
    dataIndex: "businessType",
    align: "center",
    width: 180,
    customRender: ({text}) => {
      return isLabel11(option1.value, text);
    }
  },
  {
    title: "是否启用",
    dataIndex: "isEnable",
    align: "center",
    width: 120,
    customRender: ({text}) => {
      if (text) {
        return "已启用";
      } else {
        return "未启用";
      }
    }
  },
  {
    title: "创建时间",
    dataIndex: "createdTime",
    align: "center",
    customRender: ({text}) => {
      return dayjs(text).format("YYYY-MM-DD");
    },
    width: 120
  },
  {
    title: "操作",
    dataIndex: "createTime",
    align: "center",
    width: 120,
    fixed: "right"
  }
]);

const option1 = ref([]);
option1.value = getDicValue("business_type");

function isLabel11(list, data) {
  let name = "";
  list.forEach((item) => {
    if (item.code == data) {
      name = item.name;
    }
  });
  return name;
}
</script>

<style lang="less" scoped>
.ant-form-inline .ant-form-item {
  margin-bottom: 10px !important;
}
</style>
